<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">

<div th:replace="~{admin/component/head::head}"></div>

<body>

<div th:replace="~{admin/component/header::header}"></div>

<div class="container-fluid">
  <div class="row">

    <div th:replace="~{admin/component/nav::nav}"></div>

    <main id="app" class="col-md-9 ms-sm-auto col-lg-10 px-md-4 p-4">

      <form class="row gy-2 gx-3 align-items-center">
        <div class="col-auto">
          <input v-model="param.payNo" type="text" class="form-control" placeholder="支付订单号">
        </div>
        <div class="col-auto">
          <button type="button" class="btn btn-primary" @click="queryOrderPay()">查找</button>
        </div>
      </form>
      <div class="table-responsive mt-3">
        <table class="table table-striped">
          <thead>
          <tr>
            <th scope="col">支付订单号</th>
            <th scope="col">金额</th>
            <th scope="col">账户金额</th>
            <th scope="col">渠道金额</th>
            <th scope="col">已退款金额</th>
            <th scope="col">渠道</th>
            <th scope="col">状态</th>
            <th scope="col">下单时间</th>
            <th scope="col">渠道时间</th>
            <th scope="col">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="orderPay in orderPays" :key="orderPay.id">
            <td>{{orderPay.payNo}}</td>
            <td>{{orderPay.amount}}</td>
            <td>{{orderPay.accountAmount}}</td>
            <td>{{orderPay.channelAmount}}</td>
            <td>{{orderPay.refundAmount}}</td>
            <td>{{ getEnumValue(orderPay.channel, ORDER_PAY_CHANNEL) }}</td>
            <td>{{ getEnumValue(orderPay.status, ORDER_PAY_STATUS) }}</td>
            <td>{{orderPay.cashTime}}</td>
            <td>{{orderPay.channelTime}}</td>
            <td>
              <button v-show="'I'.indexOf(orderPay.status) > -1" type="button" class="btn btn-primary btn-sm m-1"
                      @click="queryChannel(orderPay)">查询通道
              </button>
              <button v-show="'I'.indexOf(orderPay.status) > -1" type="button" class="btn btn-primary btn-sm m-1"
                      @click="close(orderPay)">关闭订单
              </button>
              <button v-show="'AS'.indexOf(orderPay.status) > -1" type="button" class="btn btn-primary btn-sm m-1"
                      @click="toRefund(orderPay)"
                      data-bs-toggle="modal" data-bs-target="#refundModal">发起退款
              </button>
            </td>
          </tr>
          </tbody>
        </table>

        <!-- 退款Modal -->
        <div class="modal fade" id="refundModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">退款</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="row mb-3">
                  <label class="col-sm-3 col-form-label">金额</label>
                  <div class="col-sm-9">
                    <input v-model="refundObj.amount" class="form-control">
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="refund">确认</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <page @change-page='queryOrderPay' :pagesize='pagination.pageSize' :total='pagination.total' :page='pagination.current' />

    </main>
  </div>
</div>

<script>
  // 下面这行声明在一个页面只能有一次，header里已经有了，所以这里去掉
  // const {createApp, ref} = Vue;
  const app = createApp({
    components: {
      page
    },
    setup() {
      const orderPays = ref();
      const pagination = ref({
        current: 1,
        pageSize: 5,
        total: 0
      });
      const orderSnapshot = ref();
      orderSnapshot.value = {};
      const ORDER_PAY_STATUS = ref(window.ORDER_PAY_STATUS);
      const ORDER_PAY_CHANNEL = ref(window.ORDER_PAY_CHANNEL);
      const param = ref();
      param.value = {};

      const queryOrderPay = function (current) {
        if (Tool.isEmpty(current)) {
          current = 1;
        }
        pagination.value.current = current;
        axios.get("/pay/admin/order-pay/query-list", {
          params: {
            page: current,
            size: pagination.value.pageSize,
            payNo: param.value.payNo
          }
        }).then((response) => {
          const data = response.data;
          if (data.success) {
            orderPays.value = data.content.list;
            // 设置分页控件的值
            pagination.value.total = Number(data.content.total);
          } else {
            Msg.error(data.message);
          }
        });
      };

      const queryChannel = function (orderPay) {
        axios.get("/pay/admin/order-pay/query-channel/" + orderPay.payNo).then((response) => {
          const data = response.data;
          if (data.success) {
            Msg.info(data.content);
            queryOrderPay(pagination.value.current);
          } else {
            Msg.error(data.message);
          }
        });
      };

      const close = function (orderPay) {
        axios.get("/pay/admin/order-pay/close-channel/" + orderPay.payNo).then((response) => {
          const data = response.data;
          if (data.success) {
            Msg.info(data.content);
            queryOrderPay(pagination.value.current);
          } else {
            Msg.error(data.message);
          }
        });
      };

      // -------------------- 退款 ------------------
      const refundObj = ref();
      refundObj.value = {};
      const toRefund = (record) => {
        refundObj.value = {
          payNo: record.payNo,
          amount: null
        };
      };
      const refund = function () {
        axios.get("/pay/admin/order-pay/refund/" + refundObj.value.payNo + "/" + refundObj.value.amount).then((response) => {
          const data = response.data;
          if (data.success) {
            Msg.info(data.content);
            queryOrderPay(pagination.value.current);
          } else {
            Msg.error(data.message);
          }
        });
      };

      const getEnumValue = (key, obj) => {
        return Tool.getEnumValue(key, obj);
      };

      onMounted(() => {
        queryOrderPay();
      });

      return {
        orderPays,
        pagination,
        queryOrderPay,
        getEnumValue,
        ORDER_PAY_STATUS,
        ORDER_PAY_CHANNEL,
        param,
        queryChannel,
        close,
        refundObj,
        toRefund,
        refund,
      }
    }
  });
  app.mount("#app");
</script>

</body>
</html>
